<template>
<!--    <p>{{ postList.length }}</p>-->
    <ul
            class="infinite-list-wrapper"
            :infinite-scroll-disabled="disabled"
            v-infinite-scroll="load"
    >
        <el-card v-if="postList.length > 0" class="box-card" v-for="post in postList" :key="post.postId">
            <template #header>
                <div class="card-header">
                    <el-link class="title" :underline="false" @click="detail(post)">{{ post.title }}</el-link>
                    <span>{{ post.author }}</span>
                </div>
            </template>
            <div class="text">
                <div ref="contentText" v-html="handleContent(post.content)"/>
            </div>
            <el-row class="item">
                <el-col :span="3">{{ post.thumbs }}</el-col>
                <el-col :span="3">{{ post.collects }}</el-col>
                <el-col :span="3">{{ post.looks }}</el-col>
                <el-col :span="9"></el-col>
                <el-col :span="6">{{ post.updateTime }}</el-col>
            </el-row>
        </el-card>
        <p v-if="loading">Loading...</p>
        <p v-if="noMore">No more</p>
    </ul>
</template>

<script setup>
import {computed, ref, watch} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {getCollectIdList, getLookIdList, getPostList, getPostListByIdList} from "@/request/post";
import store from "@/store";

name = "PostList"

const postSearch = ref({
    current: 1,
    size: 10,
    total: 999,
    key: "",
    idList: []
})
const props = defineProps(["postList"])

const postList = ref([]);

const count = ref(10)
const loading = ref(false)
const noMore = computed(() => postList.value.length >= postSearch.value.total )
const disabled = computed(() => loading.value || noMore.value)
const contentText = ref({})
const route = useRoute();
const router = useRouter();

const handle = (res) => {
    if (res.data.code === 200) {
        console.log("data",res.data)
        postSearch.value.idList = res.data.data.records;
        postSearch.value.total = res.data.data.total;
        getPostListByIdList(postSearch.value).then(({data}) => {
            loading.value = false;
            postList.value.push(...(data.data.records))
        });
    }
};

const load = () => {
    loading.value = true;
    console.log("load",postSearch.value)
    postSearch.value = {
        ...postSearch.value,
        collectTag: route.query.collectTag,
        lookTag: route.query.lookTag
    }
    console.log("loadsearch",postSearch.value)
    getPostList(postSearch.value).then(({data}) => {
        loading.value = false;
        postSearch.value.total = data.data.total;
        postList.value.push(...(data.data.records))
    });
    postSearch.value.current += 1;
}

const handleContent = (content) => {
    let newContent = content.trim().replaceAll(/<[^<>]+>/g, "");
    return newContent.substring(0, 200) + "......";
};

watch(() => route.query, (v) => {
    console.log("list",v)
    postSearch.value = {
        size: 10,
        current: 1,
        total: -1,
        ...v
    };
    postList.value = []
    getPostList(postSearch.value).then(({data})=>{
        if(data.code === 200){
            postList.value = data.data.records;
            postSearch.value.total = data.data.total;
        }
    })
},{deep:true});

const detail = (post) => {
    store.commit("GLOBAL_POST", post);
    router.push({
        path: "/post/detail",
        name: "post-detail",
        query: { ...postSearch.value }
    })
}

</script>

<style scoped>
.infinite-list-wrapper {
    text-align: center;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    text-align: left;
    margin-bottom: 20px;
    padding: 0 50px 10px 10px;
    font-size: 18px;
    max-height: 120px;
    overflow: hidden;
}

.item {
    font-size: 14px;
}

.title {
    font-size: 18px;
    font-weight: 500;
}

.box-card {
    width: 95%;
    margin: 30px;
    display: inline-block;
}
</style>
